<template>
  <el-container>
    <el-aside class="bg-white" width="420px">
      <!--左侧搜索条件-->
      <div class="container-ymm container_tabs pt-20">
        <el-row :gutter="10" class="header-ymm" style="padding:0;border:none;">
          <el-select
            v-model="adjustmentType"
            placeholder="类型"
            class="seach-select"
            size="small"
            @change="getList"
          >
            <el-option
              v-for="adjustmentType in adjustmentTypeList"
              :label="adjustmentType.name"
              :value="adjustmentType.id"
              :key="adjustmentType.id"
            />
          </el-select>
          <el-select
            v-model="storeId"
            placeholder="请选择仓库"
            class="seach-select"
            size="small"
            @change="getList"
          >
            <el-option
              v-for="warehouse in warehouseList"
              :label="warehouse.warehouseName"
              :value="warehouse.warehouseId"
              :key="warehouse.warehouseId"
            />
          </el-select>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="15">
            <el-date-picker
              v-model="listQuery.time"
              :picker-options="pickerOptions"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            />
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="17">
            <el-input
              v-model="skuCode"
              placeholder="输入SKU查询"
              class="s-input"
              prefix-icon="el-icon-search"
            />
          </el-col>
          <el-col :span="5">
            <el-button type="primary" @click="searchFrom">查询</el-button>
          </el-col>
        </el-row>
        <el-row>
          <div class="list">
            <div
              v-for="(item,index) in adjustmentListData"
              :key="index"
              :style="item.Mystyle"
              class="item"
              @click="currentChange(item)"
            >
              <p class="name">{{ item.warehouseName?item.warehouseName:'--' }}</p>
              <el-row type="flex" justify="space-between">
                <span
                  class="price"
                >{{ item.adjustmentType ===2 ?item.adjustmentType?'入库':'--':item.adjustmentType?'出库':'--' }}</span>
                <span class="date">{{ item.createTime | parseTime('{y}-{m}-{d}') }}</span>
              </el-row>
            </div>
          </div>
        </el-row>
        <div class="table-ymm-bt1">
          <el-pagination
            :current-page="listQuery.page"
            :page-sizes="[10,20,30, 50]"
            :page-size="listQuery.pageSize"
            :total="total"
            background
            layout="sizes, prev, pager, next,total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        <component :is="modal" :modal-data="modalData" @close="closeChild"/>
      </div>
    </el-aside>
    <el-main>
      <div class="container-ymm" style="margin-left:15px;">
        <div class="pl-30 pr-30">
          <el-row :gutter="10" style="text-align:right" class="pt-15 pb-15">
            <el-col :span="6"/>
            <el-button type="primary" @click="addFun">新建</el-button>
          </el-row>
          <el-row :gutter="20" style="margin-bottom: 15px;border: 1px dashed #eee"/>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label">单号:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">{{ adjustmentData.adjustmentNumber }}</div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label">方式:</div>
                </el-col>
                <el-col :span="17">
                  <div
                    class="shipment_div"
                  >{{ adjustmentData.adjustmentType ===2 ?adjustmentData.adjustmentType?'入库':'':adjustmentData.adjustmentType?'出库':'' }}</div>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label">创建时间:</div>
                </el-col>
                <el-col :span="17">
                  <div
                    class="shipment_div"
                  >{{ adjustmentData.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</div>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label">备注:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">{{ adjustmentData.remark }}</div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row :gutter="20"/>
        </div>

        <div>
          <div class="table-ymm">
            <el-table :data="adjustmentDetailDataList" style="width: 100%" border>
              <el-table-column label="分类">
                <template slot-scope="scope">
                  <span v-if="scope.row.detailsType==='1'">整机</span>
                  <span v-else-if="scope.row.detailsType==='2'">辅材</span>
                  <span v-else-if="scope.row.detailsType==='3'">工具</span>
                  <span v-else-if="scope.row.detailsType==='4'">赠品</span>
                  <span v-else>--</span>
                </template>
              </el-table-column>

              <el-table-column label="SKU编码">
                <template slot-scope="scope">
                  <span>{{ scope.row.skuCode?scope.row.skuCode:'--' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="SKU名称">
                <template slot-scope="scope">
                  <span>{{ scope.row.skuName }}</span>
                </template>
              </el-table-column>

              <el-table-column label="条码">
                <template slot-scope="scope">
                  <span>{{ scope.row.serialNumber }}</span>
                </template>
              </el-table-column>
              <el-table-column label="数量">
                <template slot-scope="scope">
                  <span>{{ scope.row.quantityAdjusted }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- <div class="table-ymm-bt">
            <el-pagination
              :current-page="table.current_page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="10"
              :pager-count="table.page_count"
              :total="table.total"
              background
              layout="sizes, prev, pager, next,total"
              @current-change="handleCurrentChange"
            />
          </div>
          <component :is="modal" :modal-data="modalData" @close="closeChild"/>-->
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Add from './dialog/Add.vue'
import { getAdjustmentSheet } from '@/api/pas/adjustment'
import { parseTime } from '@/utils'
import { queryList } from '@/api/pas/warehouse'
export default {
  data() {
    return {
      listQuery: {
        page: 1,
        pageSize: 10,
        keyword: null,
        starTime: null,
        endTime: null,
        time: null,
        pageNumber: null,
        warehouseId: null,
        inventoryStatus: null
      },
      total: 1,
      warehouseList: [],
      storeId: null,
      adjustmentType: null,
      adjustmentTypeList: [
        { id: '', name: '请选择类型' },
        { id: '2', name: '入库' },
        { id: '1', name: '出库' }
      ],
      parentMsg: null,
      skuCode: null,
      modal: null,
      modalData: {},
      adjustmentData: {},
      adjustmentListData: [],
      firstOtion: { warehouseId: '', warehouseName: '请选择仓库' },
      adjustmentDetailDataList: [],
      adjustmentDetailData: {},

      table: {
        current_page: 1,
        page_count: 10,
        total: 1
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      time: ''
    }
  },
  created() {
    this.getList()
    this.queryAllWarehouse()
  },
  methods: {
    currentChange(item) {
      // 选择记录
      for (var i = 0; i < this.adjustmentListData.length; i++) {
        if (this.adjustmentListData[i].Mystyle) {
          this.adjustmentListData[i].Mystyle = null
        }
      }
      this.adjustmentDetailDataList = item.details

      this.adjustmentData = item

      item.Mystyle = 'background-color: #c7c0c0'
      this.adjustmentListData.push()
      this.adjustmentDetailDataList.push()
    },
    closeChild() {
      this.modal = null
      this.getList()
    },
    addFun() {
      this.modalData = { type: '111' }
      this.modal = Add
    }, // 分页
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    searchFrom() {
      if (this.listQuery.time !== null && this.listQuery.time !== '') {
        this.listQuery.starTime = parseTime(
          this.listQuery.time[0],
          '{y}-{m}-{d} {h}:{i}'
        )
        this.listQuery.endTime = parseTime(
          this.listQuery.time[1],
          '{y}-{m}-{d} {h}:{i}'
        )
      } else {
        this.listQuery.starTime = null
        this.listQuery.endTime = null
      }
      this.listQuery.pageNumber = 0
      this.listQuery.page = 1
      this.getList()
    },
    getList() {
      this.listLoading = true
      this.listQuery.pageNumber =
        (this.listQuery.page - 1) * this.listQuery.pageSize
      this.listQuery.storeId = this.storeId // 仓库id
      this.listQuery.adjustmentType = this.adjustmentType // 调整类型 1 入 2出
      this.listQuery.skuCode = this.skuCode // skuCode
      getAdjustmentSheet(this.listQuery)
        .then(response => {
          if (response.data.status === 'success') {
            if (
              !response.data.data.list ||
              response.data.data.list.length === 0
            ) {
              this.listLoading = false
              this.adjustmentListData = []
              this.adjustmentData = {}
              this.adjustmentDetailDataList = []
              this.adjustmentDetailDataList.push()
              this.total = 1
              return
            }
            this.total = response.data.data.total
            this.adjustmentListData = response.data.data.list
            this.adjustmentData = this.adjustmentListData[0]

            this.adjustmentListData[0].Mystyle = 'background-color: #c7c0c0'

            this.adjustmentDetailDataList = this.adjustmentListData[0].details
            this.listLoading = false
          } else if (response.data.status === 'token_check_faild') {
            this.$message({
              message: response.data.messge,
              type: 'warning'
            })
            this.listLoading = false
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '数据加载失败',
            type: 'warning'
          })
          this.listLoading = false
        })
    },
    queryAllWarehouse() {
      var data = {
        deteleFlag: 'N'
        // isRange: 'YES'
      }
      queryList(data)
        .then(response => {
          if (response.data.status === 'success') {
            this.warehouseList = response.data.data.list
            this.warehouseList.unshift(this.firstOtion)
          }
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

<style >
.shipment_label {
  float: left;
  font-family: 'Microsoft Yahei';
  font-size: 16px;
}

.shipment_div {
  float: left;
  font-family: 'Microsoft Yahei';
  font-size: 13px;
  font-weight: 500;
}
.material-filter-container > .el-row,
.shipment_header {
  border: 1px;
  color: #333;
  line-height: 30px;
}

.el-aside {
  color: #333;
  line-height: 18px;
}

.el-main {
  color: #333;

  line-height: 30px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-container:nth-child(5) .el-aside {
  line-height: 260px;
}
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}
.el-pagination__total,
.el-pagination__sizes,
.btn-prev,
.el-pager,
.btn-next,
.el-pagination__jump {
  margin-top: 2px !important;
}
.el-pagination {
  line-height: 1px;
  white-space: pre-wrap;
}
.el-table__body tr.current-row > td {
  background-color: #dde9fc;
}

.el-input--medium .el-input__icon {
  line-height: 36px;
  margin-top: 0.5rem;
}

.el-input--small .el-input__inner {
  margin-left: 0.4rem;
  height: 32px;
  line-height: 32px;
}

.el-col-5 {
  margin-top: 0.9rem;
}
.el-date-editor--datetimerange.el-input,
.el-date-editor--datetimerange.el-input__inner {
  width: 250px;
}
.el-date-editor .el-range-separator {
  display: inline-block;
  height: 100%;
  padding: 0 5px;
  margin: 0;

  line-height: 32px;
  font-size: 14px;
  width: 15%;
  color: #303133;
}
.container-ymm .table-ymm-bt1 {
  padding-top: 2rem;
}
.item {
  height: 4rem;
}
.list {
  height: 550px;
  overflow: auto;
  margin-bottom: 1rem;
}
.el-input--prefix .el-input__inner {
  padding-left: 30px;
  margin-top: 0.9rem;
  width: 250px;
}
</style>
